<script setup lang="ts">
import * as echarts from 'echarts';
import { useWindowSize } from '@vueuse/core';
import type { Defect, XLabelType, YLabelType } from '@/index.d';
import { getUniqueKeysFromObjectArray, getYearMonthStr } from '@/index';
const { width, height } = useWindowSize();
const leave = ref(true);
const props = defineProps({
  defectList: Array<Defect>,
  xLabelType: {
    validator(value: XLabelType) {
      return ['检测月份', '生产令号', '业主单位'].includes(value);
    }
  },
  yLabelType: {
    validator(value: YLabelType) {
      return ['缺陷数量', '缺陷长度', '工件数量'].includes(value);
    }
  },
  checkAll: {
    type: Boolean,
    default: false
  }
});

interface ChartData {
  xLabel: Array<string>;
  RT: Array<number>;
  UT: Array<number>;
  MT: Array<number>;
  PT: Array<number>;
}

const chartData: ChartData = {
  xLabel: [],
  RT: [],
  UT: [],
  MT: [],
  PT: []
};

const makeData = () => {
  chartData.xLabel = [];
  chartData.RT = [];
  chartData.UT = [];
  chartData.MT = [];
  chartData.PT = [];
  if (props.xLabelType === '检测月份') {
    chartData.xLabel = getYearMonthStr(6).reverse();
    chartData.xLabel.forEach(item => {
      let rt = 0;
      let ut = 0;
      let mt = 0;
      let pt = 0;
      props.defectList?.forEach(defect => {
        if (defect.testDate?.startsWith(item)) {
          const add = props.yLabelType === '缺陷数量' ? 1 : (defect.defectSize as number);
          switch (defect.testMethod) {
            case 'MT':
              mt += add;
              break;
            case 'PT':
              pt += add;
              break;
            case 'RT':
              rt += add;
              break;
            case 'UT':
              ut += add;
              break;
          }
        }
      });
      chartData.RT.push(rt);
      chartData.UT.push(ut);
      chartData.MT.push(mt);
      chartData.PT.push(pt);
    });
  } else if (props.xLabelType === '生产令号') {
    chartData.xLabel = getUniqueKeysFromObjectArray(props.defectList!, 'productionReference').slice(
      0,
      8
    );
    chartData.xLabel.forEach(item => {
      let rt = 0;
      let ut = 0;
      let mt = 0;
      let pt = 0;
      props.defectList?.forEach(defect => {
        if (defect.productionReference === item) {
          const add = props.yLabelType === '缺陷数量' ? 1 : (defect.defectSize as number);
          switch (defect.testMethod) {
            case 'MT':
              mt += add;
              break;
            case 'PT':
              pt += add;
              break;
            case 'RT':
              rt += add;
              break;
            case 'UT':
              ut += add;
              break;
          }
        }
      });
      chartData.RT.push(rt);
      chartData.UT.push(ut);
      chartData.MT.push(mt);
      chartData.PT.push(pt);
    });
  } else if (props.xLabelType === '业主单位') {
    chartData.xLabel = getUniqueKeysFromObjectArray(props.defectList!, 'owner').slice(0, 6);
    chartData.xLabel.forEach(item => {
      let rt = 0;
      let ut = 0;
      let mt = 0;
      let pt = 0;
      props.defectList?.forEach(defect => {
        if (defect.owner === item) {
          const add = props.yLabelType === '缺陷数量' ? 1 : (defect.defectSize as number);
          switch (defect.testMethod) {
            case 'MT':
              mt += add;
              break;
            case 'PT':
              pt += add;
              break;
            case 'RT':
              rt += add;
              break;
            case 'UT':
              ut += add;
              break;
          }
        }
      });
      chartData.RT.push(rt);
      chartData.UT.push(ut);
      chartData.MT.push(mt);
      chartData.PT.push(pt);
    });
  }
};

let option: echarts.EChartsOption;

const makeOption = () => {
  makeData();
  option = {
    title: {
      text:
        (props.checkAll ? '全部月份' : '近6个月') +
        props.yLabelType +
        '随' +
        props.xLabelType +
        '的变化',
      textStyle: {
        fontSize: 14
      }
    },

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['RT', 'UT', 'MT', 'PT']
    },
    toolbox: {
      feature: {
        saveAsImage: {},
        magicType: {
          type: ['line', 'bar', 'stack']
        }
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '7%',
      top: '7%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: chartData.xLabel
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],

    series: [
      {
        name: 'RT',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: chartData.RT
      },
      {
        name: 'UT',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: chartData.UT
      },
      {
        name: 'MT',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: chartData.MT
      },
      {
        name: 'PT',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: chartData.PT
      }
    ]
  };
};

let chartInstance: echarts.ECharts;
let echartContainer: HTMLDivElement;
const makeChart = () => {
  if (
    props.defectList === undefined ||
    props.defectList.length === 0 ||
    props.xLabelType === undefined ||
    props.yLabelType === undefined
  ) {
    return;
  }
  leave.value = false;
  makeOption();
  chartInstance && echarts.dispose(echartContainer);
  chartInstance = echarts.init(echartContainer);
  chartInstance.setOption(option);
};

onMounted(() => {
  echartContainer = document.querySelector('#mainchart') as HTMLDivElement;
  leave.value = false;
});

watch(
  () => [width.value, height.value],
  () => {
    chartInstance && chartInstance.resize();
  }
);

watch(
  () => [props, leave],
  () => {
    makeChart();
  },
  {
    deep: true
  }
);
</script>
<template>
  <div class="echart-container" id="mainchart"></div>
</template>
<style scoped lang="scss">
.echart-container {
  width: 100%;
  height: 100%;
}
</style>
